<template>
  <!-- 尾部 -->
  <div class="footer">
    <!-- 品牌图标 -->
    <div style="display: flex;">

       <ul v-for="item,index in imgList" :key="index" >
        <li style="background-color: #f7f7f7;height: 67px;display: flex;align-items: center;justify-content: center;padding-left: 11px;">
          <img style=" border-right: 1px dashed #ccc; " :src="item.url" alt=""/>
        </li>

       </ul>

    </div>

   <!-- 最底部 -->
    <!-- 正品保障 -->
   <div style="background-color: #dddddd;margin-top: 10px;">
     <div style="display: flex;height: 107px;border-bottom: 1px solid #e4e1e1;">
      <div style="display: flex;width: 230px;height: 77px;justify-content: center;align-items: center;" v-for="item,index in 5" :key="index">
        <li style="width: 50px;height: 50px; background-color:#c91724 ;border-radius: 50%;display: flex;justify-content: center;align-items: center;">
          <img style="width: 30px;height: 30px;" src="../../../static/正品保障.png" alt="">

        </li>
        <li style="padding-left: 10px;">
          <span style="font-weight: bold;color: #35454e;">正品保障</span>
          <div style="font-size: 12px;color: #5b605f;padding-top: 5px;">正品保障,提供发票</div>
        </li>
      </div>
   </div>

    <!-- 购物指南 -->
     <div style="display: flex;padding-top: 30px;border-bottom: 1px solid #e4e1e1;">
    <div  v-for="item,index in 5" :key="index"  style="width: 158px; ;padding-left: 40px;">
      <div style="color: #333333;font-size: 12px;">
      <div style="font-size: 16px;padding-bottom: 20px;">购物指南</div>
        <ul>
          <li>购物流程</li>
          <li>会员介绍</li>
          <li>生活旅行/团购</li>
          <li>常见问题</li>
          <li>购物指南</li>
        </ul>
      </div>
     </div>

     <!-- 帮助中心 -->
      <div>
        <div style="font-size: 16px;padding-bottom: 20px;">帮助中心</div>

        <img src="../../../static/home/wx_cz.jpg" alt="">
      </div>

    </div>

    <!-- 关于我们 -->
     <div style="margin-top: 20px;color: #333333;font-size: 12px;text-align: center;">
      <div class="" style=" display: flex;justify-content: center;
  align-items: center;
  gap: 15px;">
          <div v-for="(item, index) in navItems" :key="'nav-' + index">
            <span
              class="nav-item"
              :class="{ active: activeIndex === index }"
              @click="activeIndex = index"
              >{{ item }}</span
            >
            <span style="padding-left: 5px;"
              v-if="index < navItems.length - 1"
              class="separator"
              :key="'separator-' + index"
              >|</span
            >
          </div>

        </div>

      <!-- 地址 -->
      <div>地址：北京市昌平区金燕龙办公楼 邮编：201316 电话：400-618-9090 网址：https://www.itheima.com</div>

        <div style="padding-top: 10px;padding-bottom: 30px;">
          <a style="" href="">鄂ICP备2024088701号</a>
        </div>

     </div>

  </div>

  </div>
</template>

<script>
export default {
  name: 'Footer',
  data () {
    return {
      activeIndex: 0,
      imgList: [
        { url: require('@/static/home/brand_03.png') },
        { url: require('@/static/home/brand_04.png') },
        { url: require('@/static/home/brand_05.png') },
        { url: require('@/static/home/brand_06.png') },
        { url: require('@/static/home/brand_07.png') },
        { url: require('@/static/home/brand_08.png') },
        { url: require('@/static/home/brand_09.png') },
        { url: require('@/static/home/brand_10.png') },
        { url: require('@/static/home/brand_11.png') },
        { url: require('@/static/home/brand_12.png') }

      ],
      navItems: [
        '关于我们',
        '联系我们',
        '商务合作',
        '商家入驻',
        '营销中心',
        '友情链接',
        '小狗服务',
        '小猫服务'
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.footer{
  width: 1100px;
  margin-left: 167px;
  margin-top: 10px;
}

 /* 移除所有链接的默认颜色和下划线 */
 a {
  color: #0000EE;         /* 默认蓝色 */
  text-decoration: underline;
  }

  /* 可选：定义不同状态的颜色 */
  a:hover {
    color: red; /* 悬停时红色 */
  }
  a:active {
    color: red; /* 点击时红色 */
  }
</style>
